﻿<link href="~/lib/layui/css/layui.css" rel="stylesheet" />   @* 一 ①样式 *@ @* ②layui js库 *@
<script src="~/js/js.cookie.js"></script>
<script src="~/js/moment.js"></script>
<script src="~/lib/layui/layui.js"></script>
<script src="~/lib/jquery/dist/jquery.js"></script>

<h2>静态轮播图页面</h2>

<!--容器代码 html-->
<div class="layui-carousel" id="ID-carousel-demo-image">
    <div carousel-item id="lunbo">
        @* <div><img src="https://unpkg.com/outeres/demo/carousel/720x360-1.jpg"></div> *@
         
    </div>
</div>

<script>
    $(function () {
        ShowLunbotu();
        lunbotu();
    });

    function ShowLunbotu() {
        $.ajax({
            url: 'https://localhost:7061/api/Product/GetProductPages?index=1&size=12', //swagger 复制
            type: 'get',
            async: false,//把异步变同步,否则后续数据不到位
            success: function (res) {
                var tr = '';
                $(res.data).each(function (i,obj) { 
                    tr += `<div><img src="${obj.imgUrl}" alt="${i}" ></div>`;
                });
                $("#lunbo").html(tr);
            }
        });
    }
    function lunbotu() {
        layui.use(function () {
            var carousel = layui.carousel;
            // 渲染 - 图片轮播
            carousel.render({
                elem: '#ID-carousel-demo-image',
                width: '720px',
                height: '360px',
                interval: 3000
            });
        });
    }
</script>



